<template>
    <div class="save">
        <el-row :gutter="20">
            <el-col :span="8" :offset="8">
                <div class="grid-content"></div>
            </el-col>
        </el-row>


        <el-row type="flex" justify="center">
            <el-col class="el-col" :span="7">
                <el-card class="el-card" shadow="always">
                    <h1>添加资源</h1>
                    <el-divider></el-divider>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="标题" prop="head">
                            <el-input v-model="ruleForm.head"></el-input>
                        </el-form-item>
                        <el-form-item label="主体" prop="body">
                            <el-input  rows="10" type="textarea" v-model="ruleForm.body"></el-input>
                        </el-form-item>
                        <el-form-item label="来自" prop="from">
                            <el-input v-model="ruleForm.from"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "ResourcesSave",
        data() {
            return {
                ruleForm: {
                    head: '',
                    body: '',
                    from: ''
                },
                rules: {
                    head: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                    ],
                    body: [
                        { required: true, message: '请填写主体内容', trigger: 'blur' }
                    ],
                    from: [
                        { required: true, message: '请填写您的昵称', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log(this.ruleForm.head);
                        this.$axios({
                            method: 'post',
                            url: 'https://kongbai121.xyz/miniapp/admins/saveByAjax',
                            // url: 'http://localhost:8080/admins/saveByAjax',
                            data: this.qs.stringify({    //这里是发送给后台的数据
                                head: this.ruleForm.head,
                                body: this.ruleForm.body,
                                from: this.ruleForm.from,
                                token: window.localStorage.getItem('token')
                            })
                        }).then((response) => {          //这里使用了ES6的语法
                            if (response.data.success) {
                                alert(response.data.msg);
                                // this.$router.push('/resources-save');
                            } else {
                                alert(response.data.msg);
                                this.$router.push('/login');
                            }
                        }).catch((error) => {
                            console.log(error)       //请求失败返回的数据
                        })
                        this.$refs[formName].resetFields();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
    .grid-content {
        border-radius: 4px;
        min-height: 100px;
    }
    .demo-ruleForm{
        transform: translateX(-25px);
    }
    .el-col {
        width: 553px;
    }
</style>